<template>
<!-- 音乐榜单下的音乐列表 -->
  <div class="music_list">
    <ul>
      <router-link :to="{name:'musicplay',params:{songid:item.song_id}}" tag="li" v-for="(item,index) in currentData" :key="index">
        <img :src="item.pic_big" alt="">
        <div class="items">
          <h6>{{ item.title }}</h6>
          <p>{{ item.author }}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        currentData:[]
      }
    },
    //从父组件musiclist中传url
    props:{
      url:{
        type:String,
        default:""
      }
    },
    //网络请求
    mounted(){
      let httpUrl = this.HOST + this.url;
      this.$axios.get(httpUrl)
        .then(res => {
          this.currentData = res.data.song_list
          console.log(res.data);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
</script>

<style scoped>

.music_list{
  height: 360px;
}

ul{
  height: 360px;
}

ul li{
  list-style: none;
  width: 100%;
  height: 60px;
}

ul img{
  width: 50px;
  height: 50px;
  padding: 5px;
  padding-left: 10px;
  float: left;
  padding-right: 0px
}

.items{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px;
}

</style>